<template>
  <div class="header">
    <div class="info">
      <div>
        <span style="cursor: pointer" @click="goHome" class="iconhover">
          <i class="iconfont icon-index"></i>招标广场首页
        </span>
        <span
          ><i v-if="whetherLogin != ''">{{ userName }}</i
          >您好！欢迎来到大宗建筑材料质量监管平台！</span
        >
        <span v-if="whetherLogin == ''" @click="goLogin" style="cursor: pointer" class="iconhover">请登录</span>
        <span v-if="whetherLogin == ''" @click="goRegister" style="cursor: pointer" class="iconhover">免费注册</span>
        <span v-else @click="signOut" style="cursor: pointer" class="iconhover">退出</span>
      </div>
      <div id="coming">
        <em @click="goUpComing" class="iconhover">
          <i class="iconfont icon-daibanshixiangguanli"></i>
          <el-badge :value="dbValue" :max="99" v-if="dbValue"> 待办事项 </el-badge>
          <label v-else style="cursor: pointer">待办事项</label>
        </em>
        <em @click="goPersonal" class="iconhover">
          <i class="iconfont icon-wode_mian"></i>
          个人中心
        </em>
        <em class="iconhover"> <i class="iconfont icon-bangzhuzhongxin"></i> 帮助中心</em>
      </div>
    </div>
  </div>
</template>
<script>
// import socketMixin from '../mixins/socketMixin'
export default {
  data() {
    return {}
  },
  computed: {
    whetherLogin() {
      return this.$store.state.whetherLogin
    },
    userName() {
      return this.$store.state.userName
    },
    dbValue() {
      return this.$store.state.upcomingNum
    }
  },
  watch: {},
  methods: {
    goUpComing() {
      if (this.$store.state.whetherLogin) {
        this.$router.push('/upcoming')
      } else {
        this.$router.push('/login')
      }
    },
    goLogin() {
      this.$router.push('/login')
    },
    goRegister() {
      this.$router.push('/register')
    },
    goHome() {
      this.$router.push('/')
    },
    goPersonal() {
      let reg = /personal/g
      let path = this.$route.path
      if (!reg.test(path)) {
        this.$router.push('/personal/index')
      }
    },
    signOut() {
      this.$store.commit('setMenuList', [])
      this.common.setCookie('materialsToken', '', 360)
      this.$store.commit('setWhetherLogin', '')
      this.$store.commit('setUserName', '')
      this.$store.commit('setUserId', '')
      this.$store.commit('setUpcoming', [])
      localStorage.removeItem('userId')
      localStorage.removeItem('userName')
      localStorage.removeItem('biddingSwitch')
      localStorage.removeItem('enterpriseId')
      localStorage.removeItem('enterpriseName')
      localStorage.removeItem('enterpriseType')
      this.$router.push('/login')
    }
  },
  mounted() {
    this.socketEventBus.$on('hasGetNewRemind', data => {
      const { type } = JSON.parse(data)
      if (type === 0) {
        this.$message.success('您有新的待办等待处理')
      }
      // let resMsgData = JSON.parse(data)
      // let { Action, Type } = resMsgData
      // if (Action == 'NewMsg') {
      //   // 刷新数量 弹窗提示
      //   this.notificationShow(data)
      // }
      // Type = parseInt(Type)
      // this.getMsgCount(Type)
    })
  }
}
</script>
<style lang="less">
#coming {
  .el-badge__content {
    color: #fff !important;
    background-color: #30c776;
    top: 12px;
    right: 4px;
    padding: 0 3px;
    height: 18px;
    line-height: 18px;
    border: #30c776;
  }
  .el-badge {
    vertical-align: 0px;
  }
}
</style>

<style scoped lang="less">
.header {
  width: 100%;
  height: 32px;
  color: #fff;
  font-size: 14px;
  line-height: 32px;
  background-color: #fa7355;
  display: flex;
  justify-content: center;
  .info {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    span {
      margin-right: 30px;
      i {
        font-style: normal;
      }
    }
    em {
      cursor: pointer;
      margin-left: 30px;
      font-style: normal;
    }
  }
  .iconhover {
    &:hover {
      color: #f5f1f1;
    }
    display: inline-flex;
    align-items: center;
  }
  .iconfont {
    font-size: 14px !important;
    margin-right: 6px;
  }
}
</style>
